<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>快件位置信息</title>
    <style>
        #baiduMap{
            height:500px;
            width:800px;
            border:5px solid black;
        }
    </style>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <script type="text/javascript" src="js/cookie.js"></script>
    <!--百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8nTRAKtZXD0wQ1tzTpcT7lcV1tzgKYTx"></script>
</head>

<body>
<script>
    $(function(){
        var map = new BMap.Map("baiduMap");
        map.centerAndZoom(new BMap.Point(113.542879,34.824115),12);
        map.setCurrentCity("郑州");
        map.enableScrollWheelZoom(true);
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        var url = location.search;
        console.log(url);
        var id=url.split("=")[1];
        var str="http://localhost:8080/route/getRouteList/"+"es/"+id;
        $.ajax({
            url: str,
            type: "GET",
            dataType: "json",
            contentType : "application/json; charset=utf-8",
            success:function(data){
                if(data.code.code === 0){
                    var routeList=data.routeList;
                    var pointArr = [];
                    for (var k = 0; k < routeList.length; k ++) {
                        pointArr.push({
                            lng: routeList[k].y,
                            lat: routeList[k].x
                        });
                        // alert(pointArr.lng+"  "+pointArr.lat);
                    }
                    // 生成坐标点
                    var trackPoint = [];
                    for (var i = 0, j = pointArr.length; i < j; i++) {
                        trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));
                    }
                    map.centerAndZoom(trackPoint[0], 15);

                    // 画线
                    var polyline = new BMap.Polyline(trackPoint, {
                        strokeColor: "orange",
                        strokeWeight: 3,
                        setStrokeStyle:"dashed",
                        strokeOpacity: 1
                    });
                    map.addOverlay(polyline);
                    //配置图片
                    var size = new BMap.Size(22, 22);
                    var offset = new BMap.Size(0, 0);
                    var imageSize = new BMap.Size(20, 20);
                    var icon = new BMap.Icon("./images/location.png", size, {
                        imageSize: imageSize,
                        infoWindowAnchor:new BMap.Size(0, -3)
                    });


                    //画图标
                    for (var i = 0, j = trackPoint.length; i < j; i++) {
                        if(i%500 === 0){
                            var marker = new BMap.Marker(trackPoint[i], {
                                icon: icon,
                                offset: offset
                            }); // 创建标注
                            map.addOverlay(marker);
                            marker.addEventListener("click", function () {
                                // alert(this.getPosition())
                                var point = this.getPosition();
                                layer.msg("经度：" + point.lng + "\n" + "纬度：" + point.lat);
                            });
                        }
                    }

                    //根据经纬极值计算绽放级别。 (从网上复制)
                    function getZoom(maxLng, minLng, maxLat, minLat) {
                        var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]; // 级别18到3。
                        var pointA = new BMap.Point(maxLng, maxLat); // 创建点坐标A
                        var pointB = new BMap.Point(minLng, minLat); // 创建点坐标B
                        var distance = map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位
                        for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {
                            if (zoom[i] - distance > 0) {
                                return 18 - i + 3; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
                            }
                        }
                    }

                    //  (从网上复制)
                    function setZoom(points) {
                        if (points.length > 0) {
                            var maxLng = points[0].lng;
                            var minLng = points[0].lng;
                            var maxLat = points[0].lat;
                            var minLat = points[0].lat;
                            var res;
                            for (var i = points.length - 1; i >= 0; i--) {
                                res = points[i];
                                if (res.lng > maxLng) maxLng = res.lng;
                                if (res.lng < minLng) minLng = res.lng;
                                if (res.lat > maxLat) maxLat = res.lat;
                                if (res.lat < minLat) minLat = res.lat;
                            }
                            var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;
                            var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;
                            var zoom = getZoom(maxLng, minLng, maxLat, minLat);
                            map.centerAndZoom(new BMap.Point(cenLng, cenLat), zoom);
                        } else {
                            //没有坐标，显示全中国
                            map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5);
                        }
                    }
                    setZoom(pointArr);
                }
            },
            error:function(){
                alert("error");
            }
        });
    });
</script>
<div id="middle">
    <div class="right"  id="mainFrame">
        <div class="right_cont">
            <div style=" margin: auto;width: 800px;">
                <div id="baiduMap" class="div"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>